<template>
	<!-- 员工管理 -->
	<view>
		<view class="titlebox">
			<text class="text">{{title}}</text>
			<image @click="chang(obj.account)" class="img1" src="../../../static/paimg/修改.png" mode=""></image>
			<image @click="delect(obj.empid)" class="img2" src="../../../static/paimg/删除.png" mode=""></image>
		</view>
		<view class="boximg">
			<text>头像</text>
			<image :src="obj.headimg"></image>
		</view>
		<view class="boxtext">
			<text>昵称</text>
			<text class="text">{{obj.empname}}</text>
		</view>
		<view class="boxtext">
			<text>性别</text>
			<text class="text">{{obj.sex}}</text>
		</view>
		<view class="boxinput">
			<text>年龄</text>
			<input class="text" :class="[flag==0?yes:no]" :disabled="dis" type="number" v-model="empage">
		</view>
		<view class="boxtext">
			<text>账号</text>
			<text class="text">{{obj.account}}</text>
		</view>
		<view class="boxbom">
			<text>所属部门</text>
			<text class="text">{{depname}}</text>
		</view>
		<view class="boxinput1">
			<text>联系电话</text>
			<input class="text" :class="[flag==0?yes:no]" :disabled="dis" type="number" v-model="emptel">
		</view>
		<view class="boxinput1">
			<text>联系住址</text>
			<input class="text" :class="[flag==0?yes:no]" :disabled="dis" type="text" v-model="empadr">
		</view>
		<view>
			<button class="btn1" @click="updata">{{btnname}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				empage:'',empadr:'',emppas:'',emptel:'',
				title:'更新员工信息',depname:'',emid:'',empid:'',
				btnname:'更改个人信息',type: "false",yes:"yes",no:"no",flag:'',dis:true,
				obj:{}
			}
		},
		onLoad(option) {
			var opt = JSON.parse(option.item)
			this.obj = opt
			this.empage =  opt.age
			this.empadr = opt.address
			this.emptel = opt.tel
			this.emid = opt.departmentid
			this.empid = opt.empid;
			this.getdata();
		},
		methods: {
			async getdata(){
				const res = await this.Request({
					url:'api/department/getdpt',
					method:'POST',
					data:{dptid:this.emid}
				})
				this.depname = res.data[0].dptname
			},
			async updata(){
				this.type = !this.type;
				if(this.type==true){
					// 第二次点击
					this.type =  true;
					this.flag=0;
					const res = await this.Request({
						url:'api/employee/updepdata',
						method:'PUT',
						data:{age:this.empage,tel:this.emptel,address:this.empadr,
						empid:this.empid}
					})
					if(res){
						uni.showToast({
							title: '更新成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url:'/pages/super/sup-homepage/sup-homepage'
							})
						},500)
					}
				}else{
					// 第一次点击
					this.type =  false;
					this.dis = false;
					this.flag=1;
					this.btnname = "保存"
				}
			},
			delect(e){
				uni.showModal({
					title: '提示',
					content: '是否确认删除此账号',
					success(res) {
						if (res.confirm) {
							uni.request({
								url:'api/employee/empdelect',
								method:'DELETE',
								data:{empid:e},
								success(res){
									setTimeout( () => {
										uni.showToast({
											title: '删除成功',
										})
									},300)
									uni.reLaunch({
										url:'/pages/super/superpage/empment',
									})
								}
							})
						}
					}
				});
			},
			chang(e){
				uni.navigateTo({
					url:'/pages/super/superpage/empchapass?account='+ e
				})
			}
		}
	}
</script>

<style lang="scss">
	text{
		font-family: 'Courier New';
		font-size: 130%;
		font-weight: 800;
		margin:auto 0;
		margin-left: 5px;
	}
	input{
		margin:auto 0;
	}
	.titlebox{
		width: 100%;
		height: 30px;
		background-color: #efefef;
		display: flex;
		border-bottom: 1px solid #ccc;
		image{
			margin: auto 0;
			height: 20px;
			width: 20px;
		}
		.text{
			margin: 5px 0 5px 5px;
			font-size: 110%;
			font-weight: 600;
			color: #008300;
		}
		.img1{
			margin-left: 220px;
		}
		.img2{
			margin-left: 10px;
		}
	}
	.boximg{
		height: 80px;
		width: 80px;
		display: flex;
		position: relative;
		image{
			position: absolute;
			margin: 5px 0 5px 140px;
			height: 70px;
			width: 70px;
		}
	}
	.boxtext{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 97px;
			font-size: 130%;
			color: #d3d3d3;
		}
	}
	.boxinput{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 97px;
		}
	}
	.boxinput1{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 62px;
		}
	}
	.boxbom{
		height: 50px;
		display: flex;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		.text{
			margin-left: 62px;
			font-size: 130%;
			color: #d3d3d3;
		}
	}
	.btn1{
		margin-top: 20px;
		width: 60%;
		background-color: #21c495;
	}
	.no{
		color: #55ffff;
		font-size: 140%;
	}
	.yes{
		color: #d3d3d3;
		font-size: 130%;
	}
</style>
